<template>
  <div class="page">
    <div class="choose-bar">
      <ul v-for="(config,index) in classifyConfig.info" :key="index" >
        <span class="title">{{config.title}}</span>
        <li v-for="(item,index) in config.data"
            :key="index" @click="chooseRoomClassify(config, index)">
          <span class="item">{{ item }}</span>
        </li>
        <li class="priceInterval" v-if="config.roomPriceInterval" v-for="(el,index) in config.roomPriceInterval"
            :key="index">{{el}}</li>
      </ul>
    </div>
    <div class="items-list">
      <div class="list-bar">
        <GoodsListItem v-for="(item,index) in getRoomsListData.result" :key="index" :itemData="item"></GoodsListItem>
      </div>
      <Pager :commitFun="getDataByServer" :baseConfig="pagerConfig" ></Pager>
    </div>
  </div>
</template>

<script>
import Pager from "@/components/pager"
import GoodsListItem from "@/components/GoodsListItem"
import {mapGetters} from 'vuex'

export default {
  name: "GoodsList",
  components:{
    Pager,
    GoodsListItem
  },
  data(){
    return{
      classifyConfig:{
        info:{
          roomClassify:{title:"房间类型", data:["大床房", "双床房", "棋牌房", "全部类型"]},
          roomFacility:{title:"支持设施", data:["空调", "客房宽带", "洗衣机", "吹风机"]},
          roomPrice:{title:"价格区间", data:0, roomPriceInterval:["0-100", "100-500", "150-200", "200-300", "300以上"]},
          onlyDiscount:{title:"优惠促销", data:["全部优惠促销"]},
        }
      },
      pagerConfig:{
        pageNo:1,
        pageSize:6,
        maxPage:0,
        btnSize:5,
      }
    }
  },
  computed:{
    ...mapGetters(["getRoomsListData"]),
    // 获取最大页数
    getMaxPage(){
      return Math.ceil(this.getRoomsListData.total / this.getRoomsListData.pageSize);
    }
  },
  mounted() {
    this.getDataByServer(this.pagerConfig.pageNo, this.pagerConfig.pageSize);
    this.pagerConfig.maxPage = this.getMaxPage;
  },
  methods:{
    chooseRoomClassify(config, index){
      if (config.title != "房间类型") return;
      if (index==3){
        // -1：全部类型
        index = -1;
      }
      this.$store.dispatch("getRoomsSelectListData", {classifyId:index});
    },
    getDataByServer(pageNo, pageSize){
      this.$store.dispatch("getRoomsListData", {pageNo, pageSize});
    }
  },
  watch:{
    getMaxPage(){
      this.pagerConfig.maxPage = this.getMaxPage;
    }
  },
}
</script>

<style scoped lang="less">
a{
  text-decoration: none;
  color: black;
}

.page{
  width: 1240px;
  min-height: 100vh;

  .choose-bar{
    display: block;
    width: 100%;
    height:30vh;
    background: #51446e;
    padding: 10px;

    ul{
      list-style: none;
      display: flex;
      justify-content: left;
      padding: 10px 40px;
      font-size: 12px;
      line-height: 30px;
      text-align: center;
      user-select: none;

      .title{
        width: 80px;
        font-weight: bolder;
        color: #FFFFFF;
        font-size: 16px;
      }
      li{
        width: 80px;
        background-color: rgba(0,0,0,0.2);
        margin-left: 15px;
        cursor: pointer;
        color: #FFFFFF;
      }
      .priceInterval::before{
        content: "￥";
      }
    }
  }
  .items-list{
    width: 100%;
    background: #ffb508;
    //background: #c850c0;
    margin-bottom: 20px;

    .list-bar{
      display: flex;
      justify-content: flex-start;
      flex-wrap: wrap;
      min-height: 70vh;
      width: 100%;
      gap: 20px;
      padding: 20px;
    }
  }
}
@media(max-width: 1000px){
  .page{
    width: 900px;
    margin: 0 auto;
    .choose-bar{
    }
    .items-list{
    }
  }
}
@media(max-width: 400px) {
  .page{
    width: 100%;
    .choose-bar{
    }
    .items-list{
    }
  }
}
</style>